<template>
	<div>
		<slot name="header">
			<h4 class="headerCss">{{comLan.total}}:{{value.length}}</h4>
		</slot>
		<u-table ref="table" :data="value" :use-virtual="useVirtual" v-bind="$props" v-on="$listeners">
			<!-- row-key="SysStoreID"-->
			<slot name="operationBefore"></slot>
			<slot name="operation">
				<u-table-column label="" width="40px" :show-overflow-tooltip="false" :render-header="renderHeader"
					align="center">
					<template v-slot="scope">
						<i class="el-icon-minus" :title="comLan.btnDel" @click="del(scope)"
							style="cursor: pointer;"></i>
					</template>
				</u-table-column>
			</slot>
			<slot name="operationAfter"></slot>
			<slot name="indexBefore"></slot>
			<slot name="index">
				<u-table-column :label="comLan.showIndex" type="index" width="60"></u-table-column>
			</slot>
			<slot name="indexAfter"></slot>
			<slot name="ParentIDBefore"></slot>
			<slot name="ParentID">
				<u-table-column prop="ParentID" :label="keyLan['ParentID']" width="150" align="left">
					<template v-slot="scope">
						<el-input-number type="number" pattern="\d*" v-model.number="scope.row.ParentID">
						</el-input-number>
					</template>
				</u-table-column>
			</slot>
			<slot name="ParentIDAfter"></slot>
			<slot name="EnumSysStoreTypeBefore"></slot>
			<slot name="EnumSysStoreType">
				<u-table-column prop="EnumSysStoreType" :label="keyLan['EnumSysStoreType']" width="150" align="left">
					<template v-slot="scope">
						<el-select v-model="scope.row.EnumSysStoreType" clearable style="width:120px;"
							:placeholder="keyLan['EnumSysStoreType']">
							<el-option v-for="item in EnumSysStoreType" :key="item.Value" :value="item.Value"
								:label="enumLanTxt(item.Label)">
							</el-option>
						</el-select>
					</template>
				</u-table-column>
			</slot>
			<slot name="EnumSysStoreTypeAfter"></slot>
			<slot name="SysStoreNameBefore"></slot>
			<slot name="SysStoreName">
				<u-table-column prop="SysStoreName" :label="keyLan['SysStoreName']" width="150" align="left">
					<template v-slot="scope">
						<el-input v-model="scope.row.SysStoreName"></el-input>
					</template>
				</u-table-column>
			</slot>
			<slot name="SysStoreNameAfter"></slot>
			<slot name="DirectorBefore"></slot>
			<slot name="Director">
				<u-table-column prop="Director" :label="keyLan['Director']" width="150" align="left">
					<template v-slot="scope">
						<el-input v-model="scope.row.Director"></el-input>
					</template>
				</u-table-column>
			</slot>
			<slot name="DirectorAfter"></slot>
			<slot name="PhoneNumberBefore"></slot>
			<slot name="PhoneNumber">
				<u-table-column prop="PhoneNumber" :label="keyLan['PhoneNumber']" width="150" align="left">
					<template v-slot="scope">
						<el-input v-model="scope.row.PhoneNumber"></el-input>
					</template>
				</u-table-column>
			</slot>
			<slot name="PhoneNumberAfter"></slot>
			<slot name="ProvinceBefore"></slot>
			<slot name="Province">
				<u-table-column prop="Province" :label="keyLan['Province']" width="150" align="left">
					<template v-slot="scope">
						<el-input v-model="scope.row.Province"></el-input>
					</template>
				</u-table-column>
			</slot>
			<slot name="ProvinceAfter"></slot>
			<slot name="CityBefore"></slot>
			<slot name="City">
				<u-table-column prop="City" :label="keyLan['City']" width="150" align="left">
					<template v-slot="scope">
						<el-input v-model="scope.row.City"></el-input>
					</template>
				</u-table-column>
			</slot>
			<slot name="CityAfter"></slot>
			<slot name="DistrictBefore"></slot>
			<slot name="District">
				<u-table-column prop="District" :label="keyLan['District']" width="150" align="left">
					<template v-slot="scope">
						<el-input v-model="scope.row.District"></el-input>
					</template>
				</u-table-column>
			</slot>
			<slot name="DistrictAfter"></slot>
			<slot name="AddressBefore"></slot>
			<slot name="Address">
				<u-table-column prop="Address" :label="keyLan['Address']" width="150" align="left">
					<template v-slot="scope">
						<el-input v-model="scope.row.Address"></el-input>
					</template>
				</u-table-column>
			</slot>
			<slot name="AddressAfter"></slot>
			<slot name="LongitudeBefore"></slot>
			<slot name="Longitude">
				<u-table-column prop="Longitude" :label="keyLan['Longitude']" width="150" align="left">
					<template v-slot="scope">
						<el-input-number type="number" pattern="[\d,]+\.?[\d]*" v-model.number="scope.row.Longitude">
						</el-input-number>
					</template>
				</u-table-column>
			</slot>
			<slot name="LongitudeAfter"></slot>
			<slot name="LatitudeBefore"></slot>
			<slot name="Latitude">
				<u-table-column prop="Latitude" :label="keyLan['Latitude']" width="150" align="left">
					<template v-slot="scope">
						<el-input-number type="number" pattern="[\d,]+\.?[\d]*" v-model.number="scope.row.Latitude">
						</el-input-number>
					</template>
				</u-table-column>
			</slot>
			<slot name="LatitudeAfter"></slot>
			<slot name="EnumStatusBefore"></slot>
			<slot name="EnumStatus">
				<u-table-column prop="EnumStatus" :label="keyLan['EnumStatus']" width="150" align="left">
					<template v-slot="scope">
						<el-select v-model="scope.row.EnumStatus" clearable style="width:120px;"
							:placeholder="keyLan['EnumStatus']">
							<el-option v-for="item in EnumStatus" :key="item.Value" :value="item.Value"
								:label="enumLanTxt(item.Label)">
							</el-option>
						</el-select>
					</template>
				</u-table-column>
			</slot>
			<slot name="EnumStatusAfter"></slot>
			<slot name="RemarkBefore"></slot>
			<slot name="Remark">
				<u-table-column prop="Remark" :label="keyLan['Remark']" width="150" align="left">
					<template v-slot="scope">
						<el-input type="textarea" :rows="2" v-model="scope.row.Remark" style="width: 100%;"></el-input>
					</template>
				</u-table-column>
			</slot>
			<slot name="RemarkAfter"></slot>
		</u-table>
		<slot name="footer"></slot>
	</div>
</template>

<script>
	import common from "@/common/common.js";
	import js from "@/System/Partial/SysStore/js.js";
	export default {
		name: "SysStoreListEdit",
		mixins: [common.baseVM, js],
		computed: {},
		data() {
			return {
				model: {
					ParentID: null,
					EnumSysStoreType: null,
					SysStoreName: null,
					Director: null,
					PhoneNumber: null,
					Province: null,
					City: null,
					District: null,
					Address: null,
					Longitude: null,
					Latitude: null,
					EnumStatus: 1,
					Remark: null,
				}
			}
		},
		methods: {
			renderHeader(h, data) {
				return h("div",
					[
						h("i", {
								attrs: {
									class: "el-icon-plus",
									title: this.comLan.btnAdd,
									style: "cursor: pointer;"
								},
								on: {
									click: () => {
										this.add();
									}
								}
							},
							[''])
					]);
			},
			add() {
				var newOne = JSON.parse(JSON.stringify(this.model));
				this.value.push(newOne);
			},
			del(scope) {
				var name = scope.row.SysStoreName;
				if (name == null) name = '';
				var msg = this.stringFormat(this.comLan.js["remove"], name);
				this.confirm(msg, () => {
					this.value.splice(scope.$index, 1);
				});
			}
		}
	}
</script>
